<template>
	<label class="hcj_radio">
		<span class="hcj_radio_input">
			<span 
			class="hcj_radio_inner"
			:class="{'hcj_radio_checked': label == checked}"
			></span>
			<input 
			type="radio"
			:name="name"
			:value="label"
			v-model="checked"
			class="hcj_radio_original"
			>
		</span>
		<span class="hcj_radio_label">
			<slot>{{label}}</slot>
		</span>
	</label>
</template>

<script>
	export default {
		name: 'hcjRadio',
		props: {
			name: {
				type: String,
				default: ''
			},
			label: {
				type: [String, Number, Boolean],
				default: ''
			},
			value: {
				type: [String, Number, Boolean],
				default: ''
			}
		},
		// 获取所有祖辈组件属性
		inject: {
			RadioGroup: {
				default: ''
			}
		},
		data() {
			return {}
		},
		methods: {
		},
		computed: {
			checked: {
				get() {
					// 判断是否有group包裹
					return this.isGroup ? this.RadioGroup.value : this.value;
				},
				set(value) {
					// 判断是否有group包裹
					this.isGroup ? this.RadioGroup.$emit('input',value)  : this.$emit('input',value);
				}
			},
			isGroup() {
				return !!this.RadioGroup
			}
		}
	}
</script>

<style scoped>
	.hcj_radio {
		/* background-color: pink; */
		display: inline-flex;
		text-align: center;
	}
	.hcj_radio_input {
		/* background-color: skyblue; */
	}
	.hcj_radio_inner {
		background-color: #fff;
		display: inline-block;
		border: 1px solid gray;
		border-radius: 50%;
		width: 15px;
		height: 15px;
		vertical-align: middle;
	}
	.hcj_radio_original {
		position: absolute;
		width: 0;
		height: 0;
		opacity: 0;
		margin: 0;
	}
	.hcj_radio_label {
		padding-left: 5px;
		vertical-align: bottom;
		/* line-height: 22px; */
		/* background-color: cadetblue; */
	}
	
	.hcj_radio_checked {
		background-color: #2c3e50;
		border: 1px solid gray;
	}
</style>